<template>
  <view class="safe-income">
    <!-- 安全隐患排查次数总览 -->
    <view class="overview-section">
      <view class="section-title">
        <text class="title-text">安全隐患防范次数</text>
      </view>
      <view class="area-filter-income">
        <!-- 筛选器 -->
        <areaFilterVue
          ref="areaFilterRef"
          :filterConfig="filterConfig"
          :areaData="areaStore.areaData"
          @filterChange="handleFilterChange"
        ></areaFilterVue>
      </view>

      <!-- 数据表格 -->
      <view class="table-container">
        <view class="table-header">
          <view class="header-cell area-cell">
            <image
              class="power-icon"
              src="/static/img/components/power-icon.png"
              mode="widthFix"
            ></image>
          </view>
          <view class="header-cell">上周</view>
          <view class="header-cell">上月</view>
          <view class="header-cell">上年</view>
        </view>

        <tn-swiper
          v-model="currentSwiperIndex"
          :data="allTableData"
          :height="swiperHeight + 'rpx'"
          :indicator="false"
          :autoplay="false"
          :loop="false"
          @change="handleSwiperChange"
        >
          <template #default="{ data: tableData, index: tableIndex }">
            <scroll-view class="table-body" scroll-y>
              <view
                class="table-row"
                v-for="(item, index) in getDisplayData(tableData.data)"
                :key="index"
              >
                <view class="row-cell area-cell">
                  <view class="area-info">
                    <text class="area-name">{{ item.area }}</text>
                  </view>
                </view>
                <view class="row-cell">{{ item.monthly }}</view>
                <view class="row-cell">{{ item.quarterly }}</view>
                <view class="row-cell">{{ item.yearly }}</view>
              </view>
            </scroll-view>
          </template>
        </tn-swiper>

        <image
          class="table-bottom"
          src="/static/img/components/table-bottom.png"
          mode="widthFix"
        ></image>
      </view>
    </view>

    <!-- 告警趋势图 -->
    <view class="section-title-chart">
      <text class="chart-title-text">安全隐患防范显示图</text>
    </view>
    <view class="chart-section">
      <view class="chart-header-container">
        <!-- 时间选择器 -->
        <view class="time-selector">
          <view
            v-for="(period, index) in timePeriods"
            :key="period.key"
            :class="['time-tab', { active: selectedPeriod === index }]"
            @click="onPeriodChange(index)"
          >
            <text class="time-text">{{ period.name }}</text>
          </view>
        </view>
        <!-- 图例 -->
        <view class="chart-legend">
          <view class="legend-item">
            <view class="legend-color"></view>
            <text class="legend-text">安全隐患防范次数</text>
          </view>
        </view>
      </view>
      <!-- 使用 swiper 包装图表 -->
      <tn-swiper
        v-model="currentChartSwiperIndex"
        :data="chartDataList"
        :height="chartSwiperHeight + 'rpx'"
        :indicator="false"
        :autoplay="false"
        :loop="false"
        @change="handleChartSwiperChange"
      >
        <template #default="{ data: chartData, index: chartIndex }">
          <view class="chart-item">
            <!-- 图表 -->
            <view class="chart-container">
              <view v-if="isLoading" class="no-data-tip">
                <text class="no-data-text">数据加载中...</text>
              </view>
              <view v-else-if="chartData.categories.length === 0" class="no-data-tip">
                <text class="no-data-text">暂无数据</text>
              </view>
              <qiun-data-charts
                v-else
                type="column"
                :opts="chartData.chartOpts || getChartOpts(chartData.colors)"
                :chartData="chartData"
                :animation="false"
              />
            </view>
          </view>
        </template>
      </tn-swiper>
    </view>
  </view>
</template>

<script setup>
import { ref, reactive, onMounted, nextTick, computed, watch } from 'vue';
import { createRequest } from '@/utils/request';
import areaFilterVue from '@/components/areaFilter.vue';
import { useAreaStore } from '@/store/area';

// 区域数据管理
const areaStore = useAreaStore();

// 筛选组件引用
const areaFilterRef = ref(null);

// swiper 相关数据
const allTableData = ref([]);
const currentSwiperIndex = ref(0);
const swiperHeight = ref(0);

// 图表相关数据
const currentChartSwiperIndex = ref(0);
const chartSwiperHeight = ref(500);

// 区域筛选器配置
const filterConfig = ref({
  labels: ['校区', '区域', '建筑']
});

// 时间选择器
const timePeriods = [
  { name: '上月', key: 'monthly' },
  { name: '上季', key: 'quarterly' },
  { name: '上年', key: 'yearly' },
];
const selectedPeriod = ref(0);

// 加载状态
const isLoading = ref(false);

// 图表数据列表（对应三个时间段）
const chartDataList = ref([
  {
    // 上月数据 - 绿色渐变主题
    categories: [],
    series: [
      {
        name: '安全隐患防范次数',
        data: [],
        format: function (val) {
          return val;
        },
        style: {
          opacity: 1,
        },
      },
    ],
    colors: ['#2ed573', '#1abc9c'], // 绿色渐变
    chartOpts: null, // 动态图表配置
    interval: 'monthly', // 标识时间段
    lastFetchTime: 0, // 最后获取时间戳
  },
  {
    // 上季数据 - 蓝色渐变主题
    categories: [],
    series: [
      {
        name: '安全隐患防范次数',
        data: [],
        format: function (val) {
          return val;
        },
        style: {
          opacity: 1,
        },
      },
    ],
    colors: ['#3498db', '#2980b9'], // 蓝色渐变
    chartOpts: null, // 动态图表配置
    interval: 'quarterly', // 标识时间段
    lastFetchTime: 0, // 最后获取时间戳
  },
  {
    // 上年数据 - 橙色渐变主题
    categories: [],
    series: [
      {
        name: '安全隐患防范次数',
        data: [],
        format: function (val) {
          return val;
        },
        style: {
          opacity: 1,
        },
      },
    ],
    colors: ['#f39c12', '#e67e22'], // 橙色渐变
    chartOpts: null, // 动态图表配置
    interval: 'yearly', // 标识时间段
    lastFetchTime: 0, // 最后获取时间戳
  },
]);

// 获取图表配置的函数
const getChartOpts = (colors = ['#2ed573']) => {
  return {
    color: colors,
    padding: [30, 30, 30, 30],
    enableScroll: false,
    legend: {
      show: false,
    },
    xAxis: {
      disableGrid: true,
      fontColor: 'rgba(255, 255, 255, 0.3)',
      fontSize: 16,
      rotateLabel: false,
      boundaryGap: true,
      data: [{ min: 0, max: 10 }], // 动态设置
      labelCount: 10, // 动态设置
      itemCount: 10, // 动态设置
    },
    yAxis: {
      gridType: 'solid',
      dashLength: 0,
      fontColor: 'rgba(255, 255, 255, 0.3)',
      fontSize: 16,
      gridColor: 'rgba(255, 255, 255, 0.2)',
      splitNumber: 4,
      data: [{ min: 0, max: 100 }], // 动态设置
    },
    extra: {
      column: {
        width: 12,
        linearType: 'custom',
        barBorderRadius: [4, 4, 0, 0],
        customColor: colors, // 使用传入的颜色数组作为渐变色
        linearOpacity: 0.8, // 渐变透明度
      },
    },
    dataLabel: true,
    dataPointShape: false,
    enableMarkLine: false,
    enableMarkPoint: false,
  };
};



// swiper 变化事件处理
const handleSwiperChange = index => {
  // 获取当前筛选层级数据
  const currentLevels = areaFilterRef.value?.filterLevels || [];
  // 如果有筛选层级，同步更新最后一级筛选组件
  if (currentLevels.length > 0) {
    const lastLevelIndex = currentLevels.length - 1;
    const lastLevel = currentLevels[lastLevelIndex];
    if (lastLevel && index < lastLevel.options.length) {
      // 使用新的筛选组件API更新最后一级索引
      areaFilterRef.value?.updateLevelIndex(lastLevelIndex, index);
    }
  }
  updateSwiperHeight();
};

// 更新 swiper 高度
const updateSwiperHeight = () => {
  nextTick(() => {
    if (allTableData.value.length === 0) {
      swiperHeight.value = 0;
      return;
    }
    const currentTableData = allTableData.value[currentSwiperIndex.value];
    if (currentTableData && Array.isArray(currentTableData.data)) {
      const rowCount = currentTableData.data.length;
      const visibleRows = Math.min(rowCount, 5);
      const rowHeight = 80; // 表格行高度
      const borderPerRow = 1; // border-bottom: 1rpx
      const estimatedHeight = visibleRows > 0
        ? visibleRows * rowHeight + (visibleRows - 1) * borderPerRow
        : 0;
      swiperHeight.value = estimatedHeight;
    }
  });
};

// 获取显示数据（正序渲染）
const getDisplayData = data => {
  return (data || []).slice();
};

// 获取安全隐患防范数据
const fetchSafetyData = async (periodKey) => {
  try {
    // TODO: 调用安全隐患防范数据接口
    // const result = await createRequest(`/safety/stats/${periodKey}`);
    
    // 模拟数据
    const mockData = {
      monthly: {
        data: {
          '2024-01': 15,
          '2024-02': 18,
          '2024-03': 12,
          '2024-04': 20,
          '2024-05': 16,
          '2024-06': 14,
          '2024-07': 19,
          '2024-08': 17,
          '2024-09': 13,
          '2024-10': 21
        },
        interval: 'monthly'
      },
      quarterly: {
        data: {
          'Q1-2024': 45,
          'Q2-2024': 50,
          'Q3-2024': 49,
          'Q4-2024': 54
        },
        interval: 'quarterly'
      },
      yearly: {
        data: {
          '2020': 180,
          '2021': 195,
          '2022': 210,
          '2023': 225,
          '2024': 198
        },
        interval: 'yearly'
      }
    };
    
    return mockData[periodKey] || null;
  } catch (error) {
    console.error('获取安全隐患防范数据失败:', error);
    return null;
  }
};

// 处理图表数据
const processChartData = (data, periodKey, chartIndex) => {
  if (!data || !data.data || data.interval !== periodKey) {
    console.warn('数据结构不匹配或 interval 不匹配:', data);
    return;
  }

  const safetyData = data.data;
  const entries = Object.entries(safetyData);
  
  if (entries.length === 0) {
    console.warn('没有数据可显示');
    return;
  }

  let categories = [];
  let seriesData = [];

  // 根据时间段处理数据
  if (periodKey === 'monthly') {
    // 上月数据：按月显示
    categories = entries.map(([key]) => {
      const date = new Date(key);
      return `${date.getMonth() + 1}月`;
    });
    
    seriesData = entries.map(([, value]) => Math.round(parseFloat(value) || 0));
    
  } else if (periodKey === 'quarterly') {
    // 上季数据：按季度显示
    categories = entries.map(([key]) => key);
    
    seriesData = entries.map(([, value]) => Math.round(parseFloat(value) || 0));
    
  } else if (periodKey === 'yearly') {
    // 上年数据：按年显示
    categories = entries.map(([key]) => key);
    
    seriesData = entries.map(([, value]) => Math.round(parseFloat(value) || 0));
  }

  // 更新图表数据
  chartDataList.value[chartIndex].categories = categories;
  chartDataList.value[chartIndex].series[0].data = seriesData;
  chartDataList.value[chartIndex].lastFetchTime = Date.now();

  // 动态设置y轴
  const maxValue = Math.max(...seriesData);
  const minValue = Math.min(...seriesData);
  const range = maxValue - minValue;
  
  // 获取当前图表的配置
  const currentChartOpts = getChartOpts(chartDataList.value[chartIndex].colors);
  
  if (seriesData.length > 0 && range > 0) {
    currentChartOpts.yAxis.data[0].min = 0;
    currentChartOpts.yAxis.data[0].max = Math.ceil(maxValue + range * 0.1);
  } else if (seriesData.length > 0) {
    // 如果所有值都相同，设置一个合理的范围
    currentChartOpts.yAxis.data[0].min = 0;
    currentChartOpts.yAxis.data[0].max = Math.ceil(maxValue * 1.2);
  } else {
    // 如果没有数据，设置默认范围
    currentChartOpts.yAxis.data[0].min = 0;
    currentChartOpts.yAxis.data[0].max = 100;
  }

  // 设置x轴
  currentChartOpts.xAxis.data[0].min = 0;
  currentChartOpts.xAxis.data[0].max = Math.max(0, categories.length - 1);
  
  // 根据数据量智能设置标签显示数量
  const dataLength = categories.length;
  const displayCount = Math.min(dataLength, 12);
  currentChartOpts.xAxis.labelCount = displayCount;
  currentChartOpts.xAxis.itemCount = displayCount;

  // 更新图表配置
  chartDataList.value[chartIndex].chartOpts = currentChartOpts;
};

// 获取当前选中时间段的数据
const fetchCurrentPeriodData = async (forceRefresh = false) => {
  const currentPeriodKey = timePeriods[selectedPeriod.value]?.key;
  if (!currentPeriodKey) return;

  // 检查是否已有数据，如果没有数据或强制刷新才请求
  const currentChartData = chartDataList.value[selectedPeriod.value];
  if (!forceRefresh && currentChartData && currentChartData.categories.length > 0) {
    console.log('当前时间段已有数据，跳过请求');
    return;
  }

  isLoading.value = true;
  
  try {
    const data = await fetchSafetyData(currentPeriodKey);
    if (data) {
      // 根据返回的 interval 找到对应的图表索引
      const targetIndex = chartDataList.value.findIndex(item => item.interval === data.interval);
      if (targetIndex !== -1) {
        processChartData(data, data.interval, targetIndex);
        console.log(`成功处理 ${data.interval} 时间段的数据，更新图表索引: ${targetIndex}`);
      } else {
        console.warn(`未找到匹配的图表索引，interval: ${data.interval}`);
      }
    }
  } finally {
    isLoading.value = false;
  }
};

// 图表 swiper 变化事件处理
const handleChartSwiperChange = (index) => {
  selectedPeriod.value = index;
  const periodName = timePeriods[index]?.name || '未知';
  console.log('图表Swiper切换到时间段:', periodName, '索引:', index);
  
  updateChartSwiperHeight();
};

// 时间选择变化处理函数
const onPeriodChange = async (index) => {
  if (index === selectedPeriod.value) return;
  
  selectedPeriod.value = index;
  currentChartSwiperIndex.value = index;
  
  const periodName = timePeriods[index]?.name || '未知';
  console.log('时间选择器切换到时间段:', periodName, '索引:', index);
  
  // 切换时间段后立即请求数据
  await fetchCurrentPeriodData();
  
  updateChartSwiperHeight();
};

// 更新图表 swiper 高度
const updateChartSwiperHeight = () => {
  nextTick(() => {
    if (chartDataList.value.length === 0) {
      chartSwiperHeight.value = 500;
      return;
    }

    const currentChartData = chartDataList.value[currentChartSwiperIndex.value];
    if (currentChartData) {
      // 根据图表数据动态调整高度
      const chartHeight = 400; // 图表固定高度
      chartSwiperHeight.value = chartHeight;
    } else {
      chartSwiperHeight.value = 500; // 默认高度
    }
  });
};

// 处理筛选器变化
const handleFilterChange = async (filterData) => {
  console.log('筛选变化:', filterData);
  
  // 获取当前筛选层级数据
  const currentLevels = areaFilterRef.value?.filterLevels || [];
  
  // 获取最后一级筛选
  const lastLevel = currentLevels[currentLevels.length - 1];
  if (!lastLevel || lastLevel.options.length === 0) {
    allTableData.value = [];
    currentSwiperIndex.value = 0;
    updateSwiperHeight();
    return;
  }
  // 动态判断筛选类型和层级
  const currentLevelIndex = parseInt(filterData.type.replace('filter', '')) - 1;
  const isLastLevel = currentLevelIndex === currentLevels.length - 1;

  if (isLastLevel) {
    // 最后一级筛选变化：同步swiper索引
    const targetIndex = filterData.targetIndex;
    if (targetIndex !== undefined && targetIndex >= 0 && targetIndex < allTableData.value.length) {
      currentSwiperIndex.value = targetIndex;
      updateSwiperHeight();
    }
  } else {
    await fetchTableData(filterData);
    currentSwiperIndex.value = 0;
    updateSwiperHeight();
  }
}

// 获取表格数据
const fetchTableData = async (filterData = null) => {
  try {
    let tableData = [];
    
    // 获取当前筛选层级数据
    const currentLevels = areaFilterRef.value?.filterLevels || [];
    
    // 根据筛选级别获取数据
    if (currentLevels.length > 0) {
      // 找到最后一级筛选（最深层级）
      const lastLevel = currentLevels[currentLevels.length - 1];
      
      if (lastLevel && lastLevel.options.length > 0) {
        // 为每个最后一级筛选的选项获取数据
        const promises = lastLevel.options.map(async (option) => {
          try {
            // 调用安全隐患防范次数接口
            const response = await createRequest(`/alert/stats-overview?regionId=${option.value}`);
            
            if (response.code === 200 && response.data) {
              // 转换API数据为表格格式
              const transformedData = transformApiDataToTableData(response.data);
              return {
                title: option.label,
                data: transformedData
              };
            } else {
              return {
                title: option.label,
                data: []
              };
            }
          } catch (error) {
            return {
              title: option.label,
              data: []
            };
          }
        });
        tableData = await Promise.all(promises);
      }
    }
    
    allTableData.value = tableData;
  } catch (error) {
    console.error('获取表格数据失败:', error);
  }
}

// 将API返回的数据转换为表格数据格式
const transformApiDataToTableData = (apiResponse) => {
  if (!apiResponse || !Array.isArray(apiResponse) || apiResponse.length === 0) {
    return [];
  }
  
  return apiResponse.map(item => ({
    area: item.regionName || '未知区域',
    monthly: item.lastWeekCount || '0',
    quarterly: item.lastMonthCount || '0', 
    yearly: item.lastYearCount || '0'
  }));
}

// 初始化数据
const fetchData = async () => {
  // 区域数据已在登录时获取，无需重复获取
  if (!areaStore.areaDataLoaded) {
    console.warn('区域数据未加载，可能登录时获取失败');
  }
  
  // 等待筛选组件初始化完成后，触发初始数据加载
  await nextTick();
  
  // 等待筛选组件完全初始化
  await new Promise(resolve => setTimeout(resolve, 150));
  
  // 检查筛选组件是否已初始化完成
  if (areaFilterRef.value && areaFilterRef.value.filterLevels.length > 0) {
    // 获取最后一级筛选数据
    const currentLevels = areaFilterRef.value.filterLevels;
    const lastLevel = currentLevels[currentLevels.length - 1];
    
    if (lastLevel && lastLevel.options.length > 0) {
      // 直接调用fetchTableData来加载初始数据
      await fetchTableData();
      currentSwiperIndex.value = 0;
      updateSwiperHeight();
    }
  }
  
  // 初始化图表数据
  await fetchCurrentPeriodData();
  currentChartSwiperIndex.value = 0;
  updateChartSwiperHeight();
};

// 监听图表 swiper 索引变化，确保时间选择器同步
watch(currentChartSwiperIndex, newIndex => {
  if (selectedPeriod.value !== newIndex) {
    selectedPeriod.value = newIndex;
  }
});

// 监听时间选择器变化，确保图表 swiper 同步
watch(selectedPeriod, newIndex => {
  if (currentChartSwiperIndex.value !== newIndex) {
    currentChartSwiperIndex.value = newIndex;
  }
});

onMounted(() => {
  fetchData();
});
</script>

<style scoped lang="scss">
.safe-income {
  padding: 20rpx;
  box-sizing: border-box;
}

.overview-section {
  margin-bottom: 40rpx;
}

.chart-section {
  width: 686rpx;
  height: 554rpx;
  background-image: url('/static/img/components/chart-section.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: center;
  overflow: hidden;
}

.section-title-chart {
  width: 100%;
  height: 68rpx;
  background-image: url('/static/img/homePages/chart-title.png');
  background-size: 100% 100%;
}
.chart-title-text {
  font-size: 36rpx;
  color: #fff;
  letter-spacing: 3rpx;
  font-family: 'YouSheBiaoTiHei';
  line-height: 68rpx;
  margin-left: 60rpx;
}
.section-title {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 694rpx;
  height: 88rpx;
  background-image: url('/static/img/components/section-title.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: center;
}

.title-text {
  font-size: 36rpx;
  font-weight: bold;
  color: #fff;
  letter-spacing: 3rpx;
  // font-family: 'YouSheBiaoTiHei';
  margin-bottom: 8rpx;
}

.area-filter-income {
  width: 100%;
  height: 120rpx;
  border-left: 1rpx solid #1ec8e1;
  border-right: 1rpx solid #1ec8e1;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(to bottom, #0b317f 0%, #092367 100%);
}

// 表格样式
.table-container {
  width: 100%;
  border-left: 1rpx solid #1ec8e1;
  border-right: 1rpx solid #1ec8e1;
  background: linear-gradient(to bottom, #092367 0%, #061845 100%);
  position: relative;
}

.table-bottom {
  position: absolute;
  bottom: -12rpx;
  left: -6rpx;
  width: 703rpx;
}

.table-header {
  display: flex;
  border-bottom: 1rpx solid #2a4a7a;
}

.header-cell {
  flex: 1;
  padding: 20rpx 16rpx;
  text-align: center;
  font-size: 24rpx;
  font-weight: bold;
  color: #fff;
  min-width: 120rpx;
  box-sizing: border-box;
}

.area-cell {
  flex: 1.5;
  min-width: 130rpx;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

.power-icon {
  width: 48rpx;
  height: 48rpx;
}

.table-body {
  max-height: 400rpx;

  /* 隐藏滚动条 */
  &::-webkit-scrollbar {
    display: none;
  }

  /* 兼容其他浏览器 */
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.table-row {
  display: flex;
  border-bottom: 1rpx solid rgba(255, 255, 255, 0.1);
  height: 80rpx;
  box-sizing: border-box;

  &:last-child {
    border-bottom: none;
  }
}

.row-cell {
  flex: 1;
  padding: 20rpx 16rpx;
  text-align: center;
  font-size: 24rpx;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 120rpx;
  box-sizing: border-box;
}

.area-cell {
  flex: 1.5;
  min-width: 180rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

.area-info {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
}

.area-name {
  font-size: 24rpx;
  color: #fff;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

.chart-header-container {
  width: 100%;
  height: 92rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

// 时间选择器样式
.time-selector {
  flex: 1;
  display: flex;
  padding: 30rpx;
  align-items: center;
  justify-content: space-evenly;
  box-sizing: border-box;
}

.time-tab {
  flex: 1;
  text-align: center;
  transition: all 0.3s ease;
  padding: 0 8rpx;
  background-color: rgba($color: #fff, $alpha: 0.08);
  min-width: 66rpx;
  margin-right: 8rpx;
  border-radius: 4rpx;
  height: 32rpx;
  line-height: 32rpx;
  text-align: center;
}

.time-text {
  font-size: 20rpx;
  color: rgba($color: #fff, $alpha: 0.5);
}

.time-tab.active .time-text {
  color: #096BDA;
}

// 图例样式
.chart-legend {
  flex: 1;
  display: flex;
  padding: 30rpx;
  box-sizing: border-box;
  align-items: center;
  justify-content: flex-end;
}

.legend-item {
  display: flex;
  align-items: center;
}

.legend-color {
  width: 10rpx;
  height: 10rpx;
  background: #2ed573;
  border-radius: 4rpx;
  margin-right: 12rpx;
  margin-top: 6rpx;
}

.legend-text {
  font-size: 20rpx;
  color: rgba($color: #fff, $alpha: 0.8);
}

// 图表容器
.chart-container {
  transform: scale(1);
  height: 400rpx;
  width: 100%;
}

// swiper 相关样式
.chart-item {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.no-data-tip {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  width: 100%;
}

.no-data-text {
  color: rgba(255, 255, 255, 0.6);
  font-size: 24rpx;
}
</style>

